<template>
  <div class="sub-main-w2rap-view">
    <!-- 只能有一个modal，不然会重叠 -->
    <!-- 加一层类名让地图可以操作 -->
    <div class="fix-operate-map">
      <el-dialog v-model="dialogFormVisible" custom-class="detail-progress-modal" :modal="false"
                 :draggable="true" title="通知栏" @close="closeEvent">
        <el-tabs v-model="activeName" class="demo-tabs" type="border-card">
          <el-tab-pane label="未读信息" name="first">
            <el-table :data="user" class="table" ref="multipleTable"  >
              <el-table-column type="index"  label="序号" align="center"></el-table-column>
              <el-table-column prop="content" label="通知内容" width="506" align-items="center" ></el-table-column>
              <!--              <el-table-column prop="state" label="读取状态" width="100" align="center" class="state"></el-table-column>-->
              <el-table-column label="通知栏操作" width="160" align="center">
                <template #default="scope">
                  <el-button type="primary" @click="changeState(scope.$index)">阅读</el-button>
                  <!--<el-button type="primary" @click="deleteInform(scope.$index)">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已读信息" name="second" type="border-card">
            <el-table :data="userDo" class="table" ref="multipleTable" >
              <el-table-column type="index"  label="序号" align="center"></el-table-column>
              <el-table-column prop="content" label="通知内容" width="506"></el-table-column>
              <!--              <el-table-column prop="state" label="读取状态" width="100" align="center" class="state"></el-table-column>-->
              <el-table-column label="通知栏操作" width="160" align="center">
                <template #default="scope">
                  <!--<el-button type="primary" @click="changeState(scope.$index)">阅读</el-button>-->
                  <el-button type="primary" @click="deleteInform(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: 'index',
  emits: ['close', 'refresh'],
  setup(props, context) {
    const userName = localStorage.getItem("loginName")
    const activeName = ref("first")
    const {appContext} = getCurrentInstance();
    //已读信息
    const user = reactive([])
    //未读信息
    const userDo = reactive([])
    const reportText = ref('')
    const closeEvent = () => {
      context.emit('close')
    }
    const changeState = (index) => {
      appContext.config.globalProperties.axios({
        url: `api/update/noticeTable`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("gid", user[index].gid);
          return oMyForm;
        }]
      }).then((response) => {
        user[index].state = "已读"
        userDo.push(user[index])
        user.splice(index,1)
        context.emit('refresh')
      })
    }

    const deleteInform = (index) => {
      appContext.config.globalProperties.axios({
        url: `api/delete/noticeTable`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("gid", userDo[index].gid);
          return oMyForm;
        }]
      }).then((response) => {
        userDo.splice(index, 1)
      })
    }

    // const tableHeader = ({row, column, rowIndex, columnIndex}) => {
    //   if (columnIndex === 2) {
    //     if (user[rowIndex].state === "已读") {
    //       return 'test'
    //     } else {
    //       return 'test1'
    //     }
    //   }
    // }
    const dialogFormVisible = ref(true)
    onMounted(() => {
      appContext.config.globalProperties.axios({
        url: `api/search/noticeTable`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("user", userName);
          return oMyForm;
        }]
      }).then((response) => {
        console.log(response.data)
        response.data.forEach((item) => {
          let object: any = {}
          object.gid = item.gid
          object.content = item.content
          object.state = item.state === '0' ? '未读' : '已读'
          if(object.state === '未读'){
            user.push(object)
          }else {
            userDo.push(object)
          }
        })
      })
    })
    return {
      reportText,
      dialogFormVisible,
      closeEvent,
      user,
      changeState,
      deleteInform,
      activeName,
      userDo
    }
  }
})
</script>

<style  lang="scss">
.fix-operate-map {
  .el-textarea {
    --el-input-text-color: #e9e9e9;
  }

  .el-tabs__item{
    color: #e9e9e9;
    .is-active{
      color:#027db4
    }
  }

}

.test {
  background: #027db4 !important;
  color: #fff !important;
}

.test1 {
  background: #aa0000 !important;
  color: #fff !important;
}
</style>
